<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.7.1.min.js"></script>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">我是合资</div>
    <button id="btn">按钮</button>
</body>
<script>
    // //设置css属性值
    // $("#box").css({
    //     width: "200px",
    //     height: "200px",
    //     backgroundColor: "blue"
    // })
    //获取css属性值
    console.log($("#box").css("width"));
    console.log($("#box").css("height"));
    //获取css属性值,颜色返回的是rgb
    console.log($("#box").css("backgroundColor"));   
    //设置样式
    $("#btn").click(function () {
        $("#box").css("width", "200px");
        $("#box").css("height", "200px");
        $("#box").css("backgroundColor", "blue");
        $("#box").css("color", "white");
        $("#box").css("fontSize", "20px");
        $("#box").css("fontWeight", "bold");
        $("#box").css("fontFamily", "微软雅黑"); 
        $("#box").css({
            width: "200px",
            height: "200px",
            backgroundColor: "green",
            color: "yellow",
            fontSize: "10px",
            fontWeight: "bold",
        });
    })
</script>
</html>